<template>
  <div style="padding: 30px 200px 30px 200px">
    <el-card>
      <el-form ref="ruleForm" :model="ruleForm" label-width="150px" style="padding: 50px" :rules="rules">
        <el-form-item label="原密码" prop="password">
          <el-input v-model="ruleForm.password" style="width: 300px" show-password clearable
            :fetch-suggestions="false" />
        </el-form-item>
        <el-form-item label="新密码" prop="newpassword">
          <el-input v-model="ruleForm.newpassword" style="width: 300px" show-password clearable
            :trigger-on-focus="false" />
        </el-form-item>
        <el-form-item label="确认密码" prop="agreepassword">
          <el-input v-model="ruleForm.agreepassword" style="width: 300px" show-password clearable
            :trigger-on-focus="false" />
        </el-form-item>
        <el-button type="primary" style="margin-left: 200px; width: 200px" @click="update('ruleForm')">
          提交
        </el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import md5 from '@/utils/md5'
import { mapGetters } from 'vuex'
import { updatapwd, login, getInfo } from '@/api/user'
export default {
  data() {
    const validatePassword1 = (rule, value, callback) => {
      if (value == '') {
        callback(new Error('请输入原密码'))
      } else if (value.length < 6) {
        callback(new Error('密码不能少于6位'))
      } else {
        callback()
      }
    }
    const validatePassword2 = (rule, value, callback) => {
      if (value == '') {
        callback(new Error('请输入新密码'))
      } else if (value.length < 6) {
        callback(new Error('密码不能少于6位'))
      } else {
        callback()
      }
    }
    const validatePassword3 = (rule, value, callback) => {
      if (value == '') {
        callback(new Error('请输入确认密码'))
      } else if (value.length < 6) {
        callback(new Error('密码不能少于6位'))
      } else if (this.ruleForm.newpassword != this.ruleForm.agreepassword) {
        callback(new Error('新密码和确认密码不一致'))
      } else {
        callback()
      }
    }
    return {
      pa: '123456',
      username: 'admin',
      ruleForm: {
        password: '',
        newpassword: '',
        agreepassword: ''
      },
      rules: {
        password: [
          { required: true, validator: validatePassword1, trigger: 'blur' }
        ],
        newpassword: [
          { required: true, validator: validatePassword2, trigger: 'change' }
        ],
        agreepassword: [
          { required: true, validator: validatePassword3, trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  methods: {

    update(ruleForm) {
      console.log(this.token)

      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          var obj = {
            token: this.token,
            newPwd: md5(this.ruleForm.newpassword),
            pwd: md5(this.ruleForm.password)
          }
          console.log(obj)
          updatapwd({
            // token: this.token,
            newPwd: md5(this.ruleForm.newpassword),
            pwd: md5(this.ruleForm.password)
          }).then((res) => {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.$refs[ruleForm].resetFields()
          })
            .catch((res) => {
              console.log('1', res)
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style>
.el-form-item__error {
  margin-left: 0px;
}
</style>
